<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta content="快速开发框架" name="keywords" />
    <meta name="description" content="快速开发框架">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicon.png">
    <title>myframe</title>
    <!-- Bootstrap Core CSS -->
    <link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="material/css/style.css" rel="stylesheet">
    <!-- You can change the theme colors from here -->
    <link href="material/css/colors/blue.css" id="theme" rel="stylesheet">
<![endif]-->
    <style>
        .page-login .login-form .reload-vify {
            height: 42px;
            overflow: hidden;
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .card-body {
            margin-top: 100px;
        }

        .mini-sidebar .card-body{
            margin-top: 0px;
        }
    </style>
</head>

<body>
    <!-- ============================================================== -->
    <!-- Preloader - style you can find in spinners.css -->
    <!-- ============================================================== -->
    <div id="app">
        <div class="preloader">
            <svg class="circular" viewBox="25 25 50 50">
                <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10" />
            </svg>
        </div>
        <!-- ============================================================== -->
        <!-- Main wrapper - style you can find in pages.scss -->
        <!-- ============================================================== -->
        <section id="wrapper" class="login-register login-sidebar"  style="background-image:url(assets/images/background/login-register.jpg);">
          <div class="login-box card">
            <div class="card-body">
              <form class="form-horizontal form-material" id="loginform" action="index.html">
                <a href="javascript:void(0)" class="text-center db">
                    <img src="assets/images/logo-icon.png" alt="Home" /><br/><img src="assets/images/logo-text.png" alt="Home" />
                </a>

                <div class="form-group m-t-40">
                  <div class="col-xs-12">
                    <input name="username" id="username" value="" v-model="username" class="form-control" type="text" required="" placeholder="用户名">
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-xs-12">
                    <input  name="password" id="password" v-model="password" class="form-control" type="password" required="" placeholder="密码">
                  </div>
                </div>

                  <div class="form-group">
                      <div class="col-xs-6">
                          <input name="kaptcha" id="kaptcha" v-model="captcha" class="form-control" type="text" required="" placeholder="验证码"  style="width: 150px">
                          <a href="javascript:;" class="btn btn-default btn-outline p-0 m-0 reload-vify">
                              <img :src="src" @click="refreshCode" height="34px"/>
                          </a>
                      </div>
                  </div>

                <div class="form-group">
                  <div class="col-md-12">
                    <div class="checkbox checkbox-primary pull-left p-t-0">
                      <input id="checkbox-signup" type="checkbox">
                      <label for="checkbox-signup"> 记住我 </label>
                    </div>
                    <a href="javascript:void(0)" id="to-recover" class="text-dark pull-right"><i class="fa fa-lock m-r-5"></i> 忘记密码?</a> </div>
                </div>
                <div class="form-group text-center m-t-20">
                  <div class="col-xs-12">
                    <button class="btn btn-info btn-lg btn-block text-uppercase waves-effect waves-light" type="button" @click="login">登录</button>
                  </div>
                </div>
                <div class="row">
                  <div class="col-xs-12 col-sm-12 col-md-12 m-t-10 text-center">
                    <div class="social"><a href="javascript:void(0)" class="btn  btn-facebook" data-toggle="tooltip"  title="Login with Facebook"> <i aria-hidden="true" class="fa fa-facebook"></i> </a> <a href="javascript:void(0)" class="btn btn-googleplus" data-toggle="tooltip"  title="Login with Google"> <i aria-hidden="true" class="fa fa-google-plus"></i> </a> </div>
                  </div>
                </div>
                <div class="form-group m-b-0">
                  <div class="col-sm-12 text-center">
                    <p>Don't have an account? <a href="register2.html" class="text-primary m-l-5"><b>Sign Up</b></a></p>
                  </div>
                </div>
              </form>
              <form class="form-horizontal" id="recoverform" action="index.html">
                <div class="form-group ">
                  <div class="col-xs-12">
                    <h3>Recover Password</h3>
                    <p class="text-muted">Enter your Email and instructions will be sent to you! </p>
                  </div>
                </div>
                <div class="form-group ">
                  <div class="col-xs-12">
                    <input class="form-control" type="text" required="" placeholder="Email">
                  </div>
                </div>
                <div class="form-group text-center m-t-20">
                  <div class="col-xs-12">
                    <button class="btn btn-primary btn-lg btn-block text-uppercase waves-effect waves-light" type="submit">Reset</button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </section>
    </div>
    <
    <!-- ============================================================== -->
    <!-- End Wrapper -->
    <!-- ============================================================== -->
    <!-- ============================================================== -->
    <!-- All Jquery -->
    <!-- ============================================================== -->
    <script src="assets/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap tether Core JavaScript -->
    <script src="assets/plugins/popper/popper.min.js"></script>
    <script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- slimscrollbar scrollbar JavaScript -->
    <script src="assets/lib/jquery.slimscroll.js"></script>
    <!--Wave Effects -->
    <script src="assets/lib/waves.js"></script>
    <!--Menu sidebar -->
    <script src="assets/lib/sidebarmenu.js"></script>
    <!--stickey kit -->
    <script src="assets/plugins/sticky-kit-master/dist/sticky-kit.min.js"></script>
    <script src="assets/plugins/sparkline/jquery.sparkline.min.js"></script>
    <!--Custom JavaScript -->
    <script src="assets/lib/custom.min.js"></script>
    <script src="assets/plugins/vue/vue.min.js"></script>

    <script src="material/js/baseConfig.js"></script>
    <script src="material/js/common/aes.js"></script>
    <script src="material/js/common/i18n.js"></script>
    <script src="material/js/login.js"></script>
</body>
</html>